<template>
  <div class="sheetList" v-if="sheetList.length != 0">
    <header>
      <van-icon name="arrow-left" @click="back" />
      <span>返回</span>
    </header>
    <img :src="sheetList.coverImgUrl" alt="" />
    <div class="list">
      <h3>{{ sheetList.name }}<van-button type="primary" round size="mini" @click="saveSheet">播放全部</van-button></h3>
      <newsong-item
        v-for="item in sheetList.tracks"
        :key="item.id"
        :id="item.id"
      ></newsong-item>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { getSheet } from "../api/recommend";
import newsongItem from "../components/newsongItem.vue";
export default {
  data() {
    return {
      sheetList: [],
    };
  },
  components: {
    newsongItem,
  },
  methods: {
    ...mapMutations(["xsavenowList"]),
    ...mapMutations(["xplaysong"]),
    back() {
      this.$router.back(-1);
    },
    saveSheet(){
      this.xsavenowList(this.sheetList.tracks)
      // console.log(this.sheetList.tracks);
      this.xplaysong(this.sheetList.tracks[0])
    }
  },
  created() {
    getSheet(this.$route.query.id).then((res) => {
      this.sheetList = res.playlist;
    });
  },
};
</script>
<style lang="scss" scoped>
.sheetList {
  position: relative;
  header {
    display: flex;
    align-items: center;
    width: 100vw;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.1);
    i {
      color: #fff;
    }
    span {
      font-size: 18px;
      color: #fff;
    }
  }
  > img {
    width: 100vw;
  }
  .list {
    padding-bottom: 50px;
    h3 {
      font-size: 16px;
      background-color: #9977f7;
      color: #fff;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      height: 30px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      button{
        
      }
    }
    background-color: #fff;
    width: 100vw;
    border-radius: 10px;
    position: absolute;
    top: 300px;
    left: 0;
  }
}
</style>

